<template>
  <div class="lang">

    <!-- <svg-icon icon-class="user" /> -->
    <!-- 他默认是移入后就显示下拉框 -->
    <!-- trigger="click" 点击后显示下拉框 -->
    <el-dropdown trigger="click" @command="switch_the_language">
      <span class="el-dropdown-link">
        切换语言 <i class="el-icon-cold-drink" />
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="zh">中文</el-dropdown-item>
        <el-dropdown-item command="en">英文</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {}
  },
  methods: {
    switch_the_language(lang) {
      this.$i18n.locale = lang // 设置给本地的i18n插件
      this.$message.success(`切换${lang}成功`)
    }
  }
}
</script>

<style lang="scss" scoped>
.lang {
  // inline 行内元素- ---- 不能设置宽高
  // inline-block 行内块元素  --- 可以设置， 效果又不是占一整行
  // block  块级元素
  display: inline-block;
  font-size: 22px;
  color: #a2ed08;
  margin-right: 15px;

.el-dropdown-link {
    color: red;

}
}
</style>
